<template>
	<view class="content">
	    <view>
			<uni-data-select
			  v-model="value1"
			  :localdata="range1"
			  @change="change1"
			></uni-data-select>
		</view>
		<view>
			<uni-data-select
			  v-model="value2"
			  :localdata="range2"
			  @change="change2"
			></uni-data-select>
		</view>
		<view>
			<uni-data-select
			  v-model="value3"
			  :localdata="range3"
			  @change="change3"
			></uni-data-select>
		</view>
		<view>
			<img src="/static/地图.png" class="img2" @click="map">
		</view>
	  </view>
	<view class="list">
		<view v-if="list.length>0" class="view">
			<view v-for="item in newlist" :key="item._id" @click="msxq(item)" class="li">
				<view class="img">
					<img :src=item.imgurl alt=""class="image"/>
				</view>
				<view class="zi">
					<view class="z1">{{item.title}}</view>
					<view class="z2">
						<span class="span">{{item.num}}</span>
						<span>{{item.pl}}点评</span>
					</view>
					<view class="z3">
						<span class="type" v-for="i in item.type">{{i}}</span>
					</view>
					<view class="z4">
						<span class="detail">{{item.detail}}</span>
						<span class="price">￥{{item.price}}起</span>
					</view>
				</view>
			</view>
		</view>
		<view v-else>暂无数据</view>
	</view>
</template>

<script setup lang="ts">
import {ref,computed} from 'vue';
import { onMounted } from 'vue';
const value1 = ref<number>(0)
const value2 = ref<number>(0)
const value3 = ref<number>(0)
const list = ref<any>([])
const getlist = ()=>{
	uni.request({
		url:'http://127.0.0.1:3000/ljy/house',
		method:'GET',
		data:{
			list:list.value,
			value1: value1.value,
			value2: value2.value,
			value3: value3.value
		},
		success(res:any){
			if(res.data.code==200){
				list.value =res.data.data
			}
		}
	})
}
const map = (()=>{
	uni.navigateTo({
		url:"/pages/map/map"
	})
})
const msxq = ((item:any)=>{
	const itemStr=encodeURIComponent(JSON.stringify(item))
	uni.navigateTo({
		url:`/pages/detail/detail?item=${itemStr}`
		
	})
})
const newlist = computed(()=>{
	let newlist=list.value;
	if(value1.value==1){
		newlist =newlist.sort((a,b)=>b.num-a.num)
	}else if(value1.value===2){
		newlist = newlist.sort((a,b)=>a.price-b.price)
	}else if(value1.value===3){
		newlist = newlist.sort((a,b)=>b.price-a.price)
	}else if(value1.value===0){
		return newlist
	}
	return newlist
})
onMounted(()=>{
	getlist()
})
const range1 = ref<any>(
        [{ value: 0, text: "综合排序" },
        { value: 1, text: "按评分" },
        { value: 2, text: "价格(由低到高)" },
		{ value: 3, text: "价格(由高到低)" }
		]
      )
const range2 = ref<any>(
        [{ value: 0, text: "位置区域" }
		]
      )
const range3 = ref<any>(
        [{ value: 0, text: "价格区间" }
		]
      )
const change1=(e)=>{
		  console.log("e",e);
		  getlist()
	  }
const change2=(e)=>{
		  console.log("e",e);
	  }
const change3=(e)=>{
	  console.log("e",e);
  }
</script>

<style scoped lang="scss">
	.content{
		display: flex;
		align-items: center;
		.img2{
			width: 60rpx;
			height: 60rpx;
			margin-left: 75rpx;
			margin-top: 6rpx;
		}
	}
	.list {
	  max-width: 1200rpx;
	  margin: 0 auto;
	  .view {
	    list-style: none;
	    padding: 0;
		.li {
			padding: 10rpx;
			margin-bottom: 10rpx;
			border-radius: 8rpx;
			display: flex;
			width: 100%;
			// background-color: orange;
			.img{
				width: 350rpx;
				margin-right: 20rpx;
				.image{
					width: 100%;
					height: 240rpx;
				}
			}
			.zi{
				width: 350rpx;
				height: 240rpx;
				display: flex;
				flex-direction: column;
				.z1{
					font-size: 40rpx;
					font-weight: 600;
					padding-bottom: 20rpx;
				}
				.z2{
					
					padding-bottom: 20rpx;
				}
				.z3{
					padding-bottom: 20rpx;
					.span{
						display: inline-block;
						font-size: 24rpx;
						background-color: orange;
						
					}
				}
			.type{
				border: 1px solid green;
				color: green;
				text-align: center;
				width: 150rpx;
				margin-right: 20rpx;
				font-size: 28rpx;
				padding: 4rpx;
			}
			view{
				.detail{
					font-size: 29rpx;
					color:grey;
					margin-right: 50rpx;
				}
				.price{
					color:blue;
					font-size: 35rpx;
				}
				.span{
					background-color: blue;
					color:white;
					display: inline-block;
					width: 100rpx;
					text-align: center;
					margin-right: 15rpx;
				}
			}
		  }
		}
	  }
	}
	
</style>
